<template>
  <div>
    <!-- 筛选条件 -->
    <el-form
      style="margin: 18px 10px 10px 10px; padding: 10px"
      size="mini"
      :inline="true"
      :model="selectdata"
      label-width="90px"
    >
      <el-form-item label="产品名称">
        <el-input v-model="selectdata.productName"></el-input>
      </el-form-item>
      <el-form-item label="产品类型">
        <el-select v-model="selectdata.productType" placeholder="请选择">
          <el-option
            v-for="item in productTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="业务类型">
        <el-select v-model="selectdata.applyModule" placeholder="请选择">
          <el-option
            v-for="item in applyModuleList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="启用状态:">
        <el-radio v-model="selectdata.status" label="yes">启用</el-radio>
        <el-radio v-model="selectdata.status" label="no">未启用</el-radio>
      </el-form-item>
      <el-button size="mini" type="primary" @click="getselectassistProduct()"
        >查询</el-button
      >
      <el-button size="mini" type="primary" @click="addmethod()"
        >新增产品</el-button
      >
    </el-form>

    <!-- tabel表格 -->
    <el-table
      size="mini"
      :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }"
      :data="tableList"
      id="tableTop"
      border
      stripe
    >
      <el-table-column label="产品名称" prop="productName"></el-table-column>
      <el-table-column label="产品简介" prop="productBrief"></el-table-column>
      <el-table-column
        label="详细说明"
        prop="productIntroduce"
      ></el-table-column>
      <el-table-column label="产品类型" prop="productType">
        <template slot-scope="scope">
          <template v-if="scope.row.productType == 'insurance'">保险</template>
          <template v-if="scope.row.productType == 'volume'">优惠券</template>
          <template v-if="scope.row.productType == 'commodity'">商品</template>
        </template>
      </el-table-column>
      <el-table-column label="销售价格" prop="salesMoney"></el-table-column>
      <el-table-column label="划线价格" prop="showMoney"></el-table-column>
      <el-table-column label="是否必选" prop="isMus" width="100">
        <template slot-scope="scope">
          <template v-if="scope.row.status == 'yes'">必选</template>
          <template v-if="scope.row.status == 'no'">非必选</template>
        </template>
      </el-table-column>
      <el-table-column label="默认是否选中" prop="isDefault" width="100">
        <template slot-scope="scope">
          <template v-if="scope.row.isDefault == 'yes'">必选</template>
          <template v-if="scope.row.isDefault == 'no'">非必选</template>
        </template>
      </el-table-column>
      <el-table-column label="是否可退" prop="isRefund" width="100">
        <template slot-scope="scope">
          <template v-if="scope.row.isRefund == 'yes'">可退</template>
          <template v-if="scope.row.isRefund == 'no'">不可退</template>
        </template>
      </el-table-column>
      <el-table-column label="最小购买份数" prop="minCopies"></el-table-column>
      <el-table-column label="最大购买份数" prop="maxCopies"></el-table-column>
      <el-table-column label="启用状态	" prop="status" width="100">
        <template slot-scope="scope">
          <template v-if="scope.row.status == 'yes'">启用</template>
          <template v-if="scope.row.status == 'no'">未启用</template>
          <template v-if="scope.row.status == 'del'">删除</template>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180px" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editmethod(scope.row)"
            >修改</el-button
          >
          <el-button type="primary" size="mini" @click="delmethod(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加弹窗 -->
    <el-dialog
      title="产品"
      :visible.sync="addDialogVisible"
      :inline="true"
      :close-on-click-modal="false"
      width="75%"
      center
      :show-close="false"
    >
      <el-form
        ref="addFrom"
        :model="addFrom"
        :rules="addFromrules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <div style="display: flex">
          <el-form-item label="产品名称" prop="productName">
            <el-input
              size="mini"
              style="maxWidth: 150px"
              v-model="addFrom.productName"
            ></el-input>
          </el-form-item>
          <el-form-item label="产品简介" prop="productBrief">
            <el-input
              size="mini"
              style="maxWidth: 300px"
              v-model="addFrom.productBrief"
            ></el-input>
          </el-form-item>
          <el-form-item label="详细说明" prop="productIntroduce">
            <el-input
              size="mini"
              style="width: 300px"
              v-model="addFrom.productIntroduce"
            ></el-input>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="产品类型" prop="productType">
            <el-select
              size="mini"
              style="width: 150px"
              @change="productTypeChange"
              v-model="addFrom.productType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in productTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="对应产品id" prop="correspondId">
            <el-select
              size="mini"
              style="width: 300px"
              v-model="addFrom.correspondId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in correspondList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务类型" prop="applyModule">
            <el-select
              size="mini"
              style="width: 150px"
              v-model="addFrom.applyModule"
              placeholder="请选择"
            >
              <el-option
                v-for="item in applyModuleList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="销售价格" prop="salesMoney">
            <el-input
              size="mini"
              style="width: 150px"
              v-model="addFrom.salesMoney"
            ></el-input>
          </el-form-item>
          <el-form-item label="划线价格" prop="showMoney">
            <el-input
              size="mini"
              style="width: 150px"
              v-model="addFrom.showMoney"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否必选" prop="isMust">
            <el-radio v-model="addFrom.isMust" label="yes">必选</el-radio>
            <el-radio v-model="addFrom.isMust" label="no">非必选</el-radio>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="是否默认选中" prop="isDefault">
            <el-radio v-model="addFrom.isDefault" label="yes">是</el-radio>
            <el-radio v-model="addFrom.isDefault" label="no">否</el-radio>
          </el-form-item>

          <el-form-item label="是否可退" prop="isRefund">
            <el-radio v-model="addFrom.isRefund" label="yes">可退</el-radio>
            <el-radio v-model="addFrom.isRefund" label="no">不可退</el-radio>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio v-model="addFrom.status" label="yes">启用</el-radio>
            <el-radio v-model="addFrom.status" label="no">未启用</el-radio>
            <!-- <el-radio v-model="addFrom.status" label="del">删除</el-radio> -->
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="最小购买份数" prop="minCopies">
            <el-input
              size="mini"
              style="width: 150px"
              v-model="addFrom.minCopies"
            ></el-input>
          </el-form-item>
          <el-form-item label="最大购买份数" prop="maxCopies">
            <el-input
              size="mini"
              style="width: 150px"
              v-model="addFrom.maxCopies"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeaddDi('addFrom')">取 消</el-button>
        <el-button type="primary" @click="submitForm('addFrom')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 分页 -->
    <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
    >
    </el-pagination> -->

    <!-- 删除弹窗 -->
    <el-dialog title="删除" :visible.sync="delDialogVisible" width="30%" center>
      <span>确认删除此条通用产品吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getdeleteassistProduct()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 添加弹窗
      addDialogVisible: false,
      // 删除弹窗
      delDialogVisible: false,
      // 列表数据
      tableList: [],
      //对应优惠券列表
      correspondList: [],
      //查询数据
      selectdata: {
        productName: "",
        productType: "",
        applyModule: "",
        status: "yes",
        pageNo: "1",
        pageSize: "10",
      },
      // 新增数据
      addFrom: {
        id: "",
        productName: "",
        productBrief: "",
        productIntroduce: "",
        productType: "",
        correspondId: "",
        applyModule: "",
        salesMoney: "",
        showMoney: "",
        isMust: "yes",
        isDefault: "yes",
        isRefund: "yes",
        minCopies: "",
        maxCopies: "",
        status: "yes",
      },
      // 新增验证
      addFromrules: {
        productName: [{ required: true, message: "请输入", trigger: "blur" }],
        productBrief: [{ required: true, message: "请输入", trigger: "blur" }],
        productIntroduce: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        productType: [{ required: true, message: "请选择", trigger: "change" }],
        correspondId: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        applyModule: [{ required: true, message: "请选择", trigger: "change" }],
        salesMoney: [{ required: true, message: "请输入", trigger: "blur" }],
        showMoney: [{ required: true, message: "请输入", trigger: "blur" }],
        minCopies: [{ required: true, message: "请输入", trigger: "blur" }],
        maxCopies: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      // 删除id
      delId: "",
      // 产品类型
      productTypeList: [
        // {
        //   value: "volume",
        //   label: "优惠券",
        // },
        {
          value: "insurance",
          label: "保险",
        },
        // {
        //   value: "commodity",
        //   label: "商品",
        // },
      ],
      // 业务类型
      applyModuleList: [
        {
          value: "train",
          label: "火车票",
        },
        {
          value: "flight",
          label: "机票",
        },
        {
          value: "hotel",
          label: "酒店",
        },
        {
          value: "member",
          label: "会员",
        },
        {
          value: "vipLounge",
          label: "贵宾厅",
        },
        {
          value: "vipChanne",
          label: "vip通道",
        },
      ],
      // 总条数
      pageTotal: "",
    };
  },
  watch: {},

  methods: {
    //查询按钮
    getselectassistProduct() {
      this.$axios
        .getAncillaryProductsList({
          productName:
            this.selectdata.productName == ""
              ? null
              : this.selectdata.productName,
          productType:
            this.selectdata.productType == ""
              ? null
              : this.selectdata.productType,
          applyModule:
            this.selectdata.applyModule == ""
              ? null
              : this.selectdata.applyModule,
          status: this.selectdata.status == "" ? null : this.selectdata.status,
          pageSize:
            this.selectdata.pageSize == "" ? null : this.selectdata.pageSize,
          pageNo: this.selectdata.pageNo == "" ? null : this.selectdata.pageNo,
        })
        .then((res) => {
          if (res.code == "00000") {
            this.tableList = res.data.records;
            this.pageTotal = res.total;
          }
        });
    },
    //添加按钮
    addmethod() {
      this.addDialogVisible = !this.addDialogVisible;
    },
    //修改按钮
    editmethod(row) {
      this.addFrom.id = row.id;
      this.addDialogVisible = !this.addDialogVisible;
      this.$axios
        .getAncillaryProductsInfo({
          id: row.id,
        })
        .then((res) => {
          if (res.code == "00000") {
            (this.addFrom.productName = res.data.productName),
              (this.addFrom.productBrief = res.data.productBrief),
              (this.addFrom.productIntroduce = res.data.productIntroduce),
              (this.addFrom.productType = res.data.productType),
              (this.addFrom.correspondId = res.data.correspondId),
              (this.addFrom.applyModule = res.data.applyModule),
              (this.addFrom.salesMoney = res.data.salesMoney),
              (this.addFrom.showMoney = res.data.showMoney),
              (this.addFrom.isMust = res.data.isMust),
              (this.addFrom.isDefault = res.data.isDefault),
              (this.addFrom.isRefund = res.data.isRefund),
              (this.addFrom.minCopies = res.data.minCopies),
              (this.addFrom.maxCopies = res.data.maxCopies),
              (this.addFrom.status = res.data.status);
              this.productTypeChange(res.data.productType)
          }
        });
    },
    //删除按钮
    delmethod(row) {
      this.delId = row.id;
      this.delDialogVisible = !this.delDialogVisible;
    },
    // 删除确认按钮
    getdeleteassistProduct() {
      this.$axios
        .getupdAncillaryProducts({
          id: this.delId,
          status: "del",
        })
        .then((res) => {
          if (res.code == "00000") {
            this.$message({
              message: "成功",
              type: "success",
            });
            this.delDialogVisible = !this.delDialogVisible;
            this.getselectassistProduct();
          }
        });
    },
    // 添加保存按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.addFrom.id == "") {
            this.$axios
              .getaddAncillaryProducts({
                productName: this.addFrom.productName,
                productBrief: this.addFrom.productBrief,
                productIntroduce: this.addFrom.productIntroduce,
                productType: this.addFrom.productType,
                correspondId: this.addFrom.correspondId,
                applyModule: this.addFrom.applyModule,
                salesMoney: this.addFrom.salesMoney,
                showMoney: this.addFrom.showMoney,
                isMust: this.addFrom.isMust,
                isDefault: this.addFrom.isDefault,
                isRefund: this.addFrom.isRefund,
                minCopies: this.addFrom.minCopies,
                maxCopies: this.addFrom.maxCopies,
                status: this.addFrom.status,
              })
              .then((res) => {
                if (res.code == "00000") {
                  this.$message({
                    message: "成功",
                    type: "success",
                  });
                  this.addDialogVisible = !this.addDialogVisible;
                  this.$refs[formName].resetFields();
                }
              });
          } else {
            this.$axios
              .getupdAncillaryProducts({
                id: this.addFrom.id,
                productName: this.addFrom.productName,
                productBrief: this.addFrom.productBrief,
                productIntroduce: this.addFrom.productIntroduce,
                productType: this.addFrom.productType,
                correspondId: this.addFrom.correspondId,
                applyModule: this.addFrom.applyModule,
                salesMoney: this.addFrom.salesMoney,
                showMoney: this.addFrom.showMoney,
                isMust: this.addFrom.isMust,
                isDefault: this.addFrom.isDefault,
                isRefund: this.addFrom.isRefund,
                minCopies: this.addFrom.minCopies,
                maxCopies: this.addFrom.maxCopies,
                status: this.addFrom.status,
              })
              .then((res) => {
                if (res.code == "00000") {
                  this.$message({
                    message: "成功",
                    type: "success",
                  });
                  this.addDialogVisible = !this.addDialogVisible;
                  this.$refs[formName].resetFields();
                }
              });
          }
          this.getselectassistProduct();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    closeaddDi(formName) {
      this.addDialogVisible = !this.addDialogVisible;

      this.$refs[formName].resetFields();
    },

    // 新增接口getaddAncillaryProducts
    addPost() {},
    // 产品类型change事件
    productTypeChange(val) {

      console.log(1111)
      console.log(val);
      if (val == "volume") {
        this.$axios.getCouponTypeList({ couponStatus: "yes" }).then((res) => {
          if (res.code == "00000") {
               this.correspondList =res.data.map(item=>{
              let obj={
                id:item.id,
                name:item.couponName
              }
              return obj
            })
          }
        });
      }else if(val == "insurance"){
        this.$axios.getInsuranceList().then((res) => {
          if (res.code == "00000") {
            this.correspondList =res.data.map(item=>{
              let obj={
                id:item.id,
                name:item.insuranceName
              }
              return obj
            })
          }
        });
      }
    },
  },

  mounted() {
    this.getselectassistProduct()
  },
};
</script>
<style scoped>
</style>